import React from "react";

import { BASE_URL, isAuth, API, getToken, removeToken } from "../../utils";

import { Grid, Button, Modal, Toast } from "antd-mobile";

import styles from "./index.module.css";

// 菜单数据
const menus = [
  { id: 1, name: "我的收藏", iconfont: "icon-coll", to: "/favorate" },
  { id: 2, name: "我的出租", iconfont: "icon-ind", to: "/rent" },
  { id: 3, name: "看房记录", iconfont: "icon-record" },
  {
    id: 4,
    name: "成为房主",
    iconfont: "icon-identity",
  },
  { id: 5, name: "个人资料", iconfont: "icon-myinfo" },
  { id: 6, name: "联系我们", iconfont: "icon-cust" },
];

// 默认头像
const DEFAULT_AVATAR = BASE_URL + "/img/profile/avatar.png";

const alert = Modal.alert;
export default class Profile extends React.Component {
  state = {
    isLogin: isAuth(),
    userInfo: {},
  };

  componentDidMount() {
    this.getUserInfo();
  }

  // 退出
  logout = () => {
    alert("提示", "是否确定退出?", [
      { text: "取消" },
      {
        text: "确定",
        onPress: async () => {
          // 调用退出接口
          // 注意:post 第二个参数是 data :需要传递的参数
          await API.post(`/user/logout`, null, {
            headers: {
              authorization: getToken(),
            },
          });

          // 移除token
          removeToken();

          this.setState({
            isLogin: false,
            userInfo: {
              avatar: "",
              nickname: "",
            },
          });
        },
      },
    ]);
  };

  // 获取个人资料
  async getUserInfo() {
    if (!this.state.isLogin) {
      // 未登录
      return;
    }

    const res = await API.get(`/user`);

    if (res.data.status === 200) {
      const { avatar, nickname } = res.data.body;
      this.setState({
        userInfo: {
          avatar: BASE_URL + avatar,
          nickname,
        },
      });
    } else {
      this.setState({
        isLogin: false,
      });
    }
  }

  render() {
    const { history } = this.props;
    const {
      isLogin,
      userInfo: { avatar, nickname },
    } = this.state;

    return (
      <div className={styles.root}>
        {/* 个人信息 */}
        <div className={styles.title}>
          <img
            className={styles.bg}
            src={BASE_URL + "/img/profile/bg.png"}
            alt="背景图"
          />
          <div className={styles.info}>
            <div className={styles.myIcon}>
              <img
                className={styles.avatar}
                src={avatar || DEFAULT_AVATAR}
                alt="icon"
              />
            </div>
            <div className={styles.user}>
              <div className={styles.name}>{nickname || "游客"}</div>
              {/* 登录后展示： */}
              {isLogin ? (
                <>
                  <div className={styles.auth}>
                    <span onClick={this.logout}>退出</span>
                  </div>
                  <div className={styles.edit}>
                    编辑个人资料
                    <span className={styles.arrow}>
                      <i className="iconfont icon-arrow" />
                    </span>
                  </div>
                </>
              ) : (
                <div className={styles.edit}>
                  <Button
                    type="primary"
                    size="small"
                    inline
                    onClick={() => history.push("/login")}
                  >
                    去登录
                  </Button>
                </div>
              )}

              {/* 未登录展示： */}
            </div>
          </div>
        </div>

        {/* 九宫格菜单 */}
        <Grid
          data={menus}
          columnNum={3}
          hasLine={false}
          renderItem={(item) =>
            item.to ? (
              <div
                className={styles.menuItem}
                onClick={() => this.props.history.push(item.to)}
              >
                <i className={`iconfont ${item.iconfont}`} />
                <span>{item.name}</span>
              </div>
            ) : (
              <div
                className={styles.menuItem}
                onClick={() => Toast.info("亲,功能还未上线~", 1, null, false)}
              >
                <i className={`iconfont ${item.iconfont}`} />
                <span>{item.name}</span>
              </div>
            )
          }
        />

        {/* 加入我们 */}
        <div className={styles.ad}>
          <img src={BASE_URL + "/img/profile/join.png"} alt="" />
        </div>
      </div>
    );
  }
}
